<style lang="sass" scoped>
	
	#modelDetail{
		position: relative;
		display:flex;
		width: 100%;
		height: 100%;
		flex-direction: column;
		.banner{
			width: 100%;
			height: auto;
			min-height: 5rem;
			img{
				display: block;
				min-height: 5rem;
				height: auto;
				width: 100%;
				
			}
		}
		.modelInfo{
			width: 100%;
			height: 100%;
			flex: 1;		
			background: #fff;
			.modelItem{
				width: 100%;
				height: auto;
				
				background:#fff;				
				.title{
					width: 100%;
					position: relative;
					height: 3rem;
					line-height: 3rem;
					background: #1973bf;
					padding-left: 1rem;
					display: flex;
					flex: 1;
					color: #fff;
					
					i{
						position: absolute;
						left: 0rem;
						top: 0rem;
						width: 0.3rem;
						height: 2rem;
						margin-top: -1rem;
						top:50%;
						background: #dd191d;
					}
					.cutBox{
						flex: 1;
						-webkit-box-align: end;
						-webkit-box-pack: end;
						text-align: right;						
						padding-right: 1rem;
						span{
							color: #fff;
							display: inline-block;
							width: 7rem;
							height: 2rem;
							line-height: 2rem;
							background: #dd191d;
							padding: 0 0.5rem;
							border-radius: 0.3rem;
							
						}
					}
					span{
						font-size: 1.3rem;
					}
				}
				.con{
					width: 100%;
					height: auto;										
					padding:1rem;
					dl.msg{
						width: 100%;
						min-height: 3rem;
						height:auto;
						background: #fff;
						line-height: 3rem;
						display:flex;
						font-size: 1.3rem;
						border-bottom:1px solid #e8e8e8;
						
						dt{
							width: 30%;
							height: auto;							
							background: #f2f2f2;
							text-align: center;
							color:#999;
							border-right: 1px solid #E8E8E8;
						}
						dd{							
							height: 100%;
							color: #1973bf;
							padding-left: 1rem;
							flex: 1;
						}
					}
					dl:last-child{
						border-bottom: none;
					}
				}
				.modelRecommend{
					width: 100%;
					height: auto;
					padding: 1rem;
					background: #fff;
					clear:both;
					overflow: auto; 
					zoom: 1;
					.product{
						width: 25%;
						height: 8rem;
						float: left;
						display:flex;
						flex-direction: column;
						-webkit-box-align: center;
						.img{
							width: 6rem;
							height: 6rem;
							text-align: center;
							img{
								width: 100%;
								height: auto;
								min-height: 6rem;
								margin: 0 auto;
							}							
						}
						p{
							display: block;
							height: 2rem;
							line-height: 2rem;
							font-size: 1.3rem;
							flex: 1;
							width: 100%;
							text-align: center;
						}
					}
				}
				
			}
			.carModelInfo{
				width: 100%;
				height: 7rem;
				padding: 1rem;
				background: #fff;
				display: flex;
				.carModelInfo_icon{
					width: 7rem;
					height: 100%;
					margin-right:1rem;
					img{
						width: 100%;
						max-height: 100%;
						min-height: 100%;
					}
				}
				.carModelInfo_value{
					flex: 1;
					height: 100%;
					position:relative;
					p{
						width: 100%;
						height: 2rem;
						line-height: 2rem;
						overflow: hidden;
						font-size: 1.2rem;
					}
					p:first-child{
						width: 75%;
					}
					span{
					    color: #fff;
					    display: inline-block;
					    width: auto;
					    height: 2rem;
					    line-height: 2rem;
					    background: #dd191d;
					    padding: 0 0.5rem;
					    border-radius: 0.5rem;
					    position: absolute;
					    right: 0rem;
					    top: 0rem;
					    
					}
				}
			}
		}
		.notMate{
			width: 100%;
			height: 15rem;
			line-height: 15rem;
			font-size: 1.5rem;
			text-align: center;
			color: #999;
		}
		.wslTitleLogo{
			width: 100%;
			height: 3rem;
			background: url(../../libs/images/wsx_top.jpg) no-repeat center center;
			background-size: 100% 100%;
		}
		.recommendImg{
			width: 100%;
			min-height: 8rem;
			height: auto;
			background: #fff;
			display: -webkit-box;
			div:first-child{
				width: 29.9%;
				height:3rem;
				line-height: 3rem;
				font-size: 1.3rem;
				padding-left:1rem;
				box-sizing: border-box;
			}
			div:last-child{
				flex: 1;
				text-align: left;
				box-sizing: border-box;
				-webkit-box-pack: start;
				padding-left: 1rem;
				padding: 1rem;
			    border-left: 1px solid #E8E8E8;
			    img{
			    	max-height: 8rem;
			    	max-width: 8rem;
			    	margin: 0 auto;
			    }
			}
			
		}
		.moduleBanner{
			
			p{
				width:100%;
				height:3rem;
				line-height: 3rem;
				color: #666;
				text-align:center;
				background: #F2F2F2;
			}
			img{
				width: 100%;
				height: auto;
			}
			
		}
		.redColor{
			color: #F20000;
		}
		.classifyMsg{
			width: 100%;
			height: auto;
			position: relative;
			padding: 0 1rem;
			background: #fff;
			.firstWite{
				position: absolute;
				width: 2rem;
				height: 2rem;
				border-radius: 50%;
				background: #fff;
				top: 7rem;
				left: 31%;
			}
			.secondeWite{
				position: absolute;
				width: 2rem;
				height: 2rem;
				border-radius: 50%;
				background: #fff;
				top: 7rem;
				left: 63%;
			}
			ul{
				width: 100%;				
				height: auto;
				
				li{
					width: 33.3%;
					float: left;
					text-align: center;					
					display: flex;
					-webkit-box-align: center;
					height: 8rem;
					border-bottom: 1px solid #E8E8E8;
					border-right: 1px solid #E8E8E8;
					flex-direction: column;
					-webkit-box-pack: center;
					img{
						
						max-width:4rem;	
						max-height: 4rem;				
						height: auto;
						display: block;						
					}
					img.otherImg{
					    /*margin-bottom: 0.5rem;
					    max-height: 4rem;
					    max-width: 3.5rem;*/
					}
					
					span{
						display: inline-block;
						height: 2rem;
						width: 100%;
						font-weight: 600;
						line-height: 2rem;
					}
					/*span.otherImg{
						display: inline-block;
						height: 4rem;
						width: 100%;
						font-weight: 600;
						line-height: 4rem;
					}*/
				}
				li:last-child{
					border-right: none;
				}
				.otherLi{
					border-bottom: none;
				}
			}
			.clearfix:after{
				content: '';
				height:0;
				line-height: 0;
				display: block;
				visibility: hidden;
				clear: both;
			}
			
			
		}
		.bot{
			width: 100%;
			height: 1rem;
			margin-top: 1rem;
			line-height: 1rem;
			background: #1973BF;
		}
		
		
	}
	
</style>
<template>
	
	<div id="modelDetail">		
		<!--<div class="banner" v-if="result && result.ad.length > 0" v-if="result.ad">						
			<img :src="result.ad[1].pic"/>
		</div>		-->
		<div class="modelInfo" v-if="result && resultFlag">
						
			<!--养护信息-->
			
			<div class="modelItem" v-if="maintenanceArray">
				<div class="title">
					<i></i>
					<span>养护信息</span>					
				</div>
				<div class="con">
					<div style="border: 1px solid #e8e8e8;">
						<dl class="msg" v-for="item in maintenanceArray">						
							<dt class="textOverflow_1">{{item.title}}</dt>
							<dd  v-if="item.type != 3"  style="color: #333;">{{item.value}}</dd>
							<dd  v-if="item.type == 3 && typeof item.url == 'object'"  @click="showBigListImg(item.url)" style="text-decoration:underline">查看图片
								<img style="width: 0.01rem; height: 0.01rem;opacity:0;" :src="item" track-by="$index" v-for="item in item.url"/>
							</dd>
							<dd  v-if="item.type == 3 && typeof item.url != 'object'" v-touch:tap="showBigImg(item.url)" style="text-decoration:underline">查看图片
								<img style="width: 0.01rem; height: 0.01rem;opacity:0;" :src="item.url"/>
							</dd>
							
						</dl>											
					</div>
				</div>
			</div>
			<!--产品信息-->
			<template v-if="productArray && productArray.length>0">
				<div class="modelItem" v-for="productItem in productArray" >
					<div class="title">
						<i></i>
						<span>{{productItem.group_name}}</span>					
					</div>
					<div class="con">
						<div style="border: 1px solid #e8e8e8;">
							<dl class="msg" v-for="items in productItem.items">	
								<template v-if="items.type != 3">
									<dt class="textOverflow_1" v-if="items.type !=3">{{items.title}}</dt>
									<dd v-if="items.type !=3 && items.title !='产品单价'"><span style="color: #333;">{{items.value}}</span></dd>	
									<dd v-if="items.type !=3 && items.title =='产品单价'"><span class="redColor">￥{{items.value}}</span></dd>	
								</template>
							</dl>
							<div class="moduleBanner"  v-for="item in productItem.items">
								<template v-if="item.type == 3">
									<p>产品图片</p>						
									<img :src="item.url[0]"  v-if="typeof item.url == 'object'"  v-touch:tap="showBigListImg(item.url)" />
									<span v-if="typeof item.url == 'object'">
										<img style="width: 0.01rem; height: 0.01rem;opacity:0;" :src="item" v-for="item in item.url"/>
									</span>
									<img :src="item.url"  v-if="typeof item.url != 'object'" v-touch:tap="showBigImg(item.url)"/>
								</template>
							</div>
						</div>
					</div>
				</div>
			</template>
			
			<!--分类-->			
		</div>		
		<div class="notMate" v-if="!resultFlag">抱歉！匹配不到相关数据。</div>
		<tips></tips>
		<loading v-if="getLoading.show"></loading>
	</div>
</template>

<script>
	
	
	//document.title = '赛魔油品查询系统';
	var tipsAction = require("HQ_Actions").tips,
		tipsGetter = require("HQ_Getters").tips,
		loadingAction = require("HQ_Actions").loading,
		loadingGetter = require("HQ_Getters").loading;
	var HQ_Actions = frameScript.extend({}, [tipsAction, loadingAction], true),
		HQ_Getters = frameScript.extend({}, [tipsGetter, loadingGetter], true);	
	import { swiper, swiperSlide} from 'vue-awesome-swiper';	
	module.exports={
		init:function(){
			HQ_CALLBACK.modelDetail = {};
		},
		ready:function(){
				let targetCompany = window.location.search.split('=')[1];
				if(this.$route.query.modelId){
					
					HQ.callProductApi('getProduct',{
						'compCode':targetCompany,	
						'modelId':this.$route.query.modelId,
						'catId':this.$route.query.catId											
					},this.getByBrandVinCallBack);
				}else{
				
					HQ.callProductApi('getProduct',{
						'compCode':targetCompany,
						'vin':this.$route.query.searchTxt,
						'catId':this.$route.query.catId						
					},this.getByBrandVinCallBack);
				}
	
				HQ.callProductApi('fontpage',{'compCode':targetCompany},this.getIndexCallBack);
		},
		watch:{
			
		},
		data:function(){			
		
			this.setLoading({'show':true})			
			return{
				result:null,
				banners:[],
				pciArray:[],				
				maintenanceArray:null,//养护信息组
				productArray:[],// 产品信息组
				resultFlag:true,	
				checkList:[]
			}
			
		},
		methods:{
			getIndexCallBack:function(data){
				
				if(data.number == 200){				
					var data = data.result;					
					document.title = data.comp_name+'油品查询系统';
					
				}else{
					this.showTips({
						content:data.message,
						closeTimeout:2000
					});
				}
								
			},
			showBigListImg:function(icon){	
				
				var obj = [];			
				console.log(icon);
				for(var i=0;i<icon.length;i++){
					obj[i] = {};
					obj[i].src = icon[i];				
					var img = document.createElement('img');
					img.src = icon[i]
					obj[i].w = parseInt(img.width);
					obj[i].h = parseInt(img.height);	
					console.log(obj[i].w);
				}				
				this.$preview.open(0, obj)
			},
			showBigImg:function(icon){	
				
				var obj = [],imgArray = [];				
				imgArray.push(icon)
				for(var i=0;i<imgArray.length;i++){
					obj[i] = {};
					obj[i].src = imgArray[i];				
					var img = document.createElement('img');
					img.src = imgArray[i]
					obj[i].w = parseInt(img.width);
					obj[i].h = parseInt(img.height);	
					console.log(obj[i].w);
				}				
				this.$preview.open(0, obj)
			},
			vinCallBackFn:function(data){
				this.setLoading({'show':false})
				if(data.number == 200){
					this.$set('result',data.result);					
					this.banners.push(this.result.iconBig);
					console.log(this.banners)
				}else{					
					this.showTips({
						content:data.message,
						closeTimeout:2000
					});
					this.resultFlag = false;
				}
			},
			//重新选择车型
			goselectModel:function(){
				HQ.openView(HQ.PAGE_SERVER + "index.html#!/modelSelect");
			},
			
			getByBrandVinCallBack:function(data){
				console.log(data);
				this.setLoading({'show':false})
				if(data.number == 200){
					this.$set('result',data.result);	
					
					console.log(this.result);
					if(this.result.params && this.result.params.length>0){
						for(let i = 0;i < this.result.params.length; i++){
							if(this.result.params[i].group_name == '养护信息'){						
								this.$set('maintenanceArray',this.result.params[i].items);
							}else{
								
								this.productArray.push(this.result.params[i])
								console.log(this.productArray);
								
							}
						}
						if(this.maintenanceArray && this.maintenanceArray.length>0){
							for(let i = 0;i < this.maintenanceArray.length;i++){
								if(typeof this.maintenanceArray[i].url == 'object'){
									this.$set('checkList',this.maintenanceArray[i].url);
								}
							}
						}
						
					}else{
						this.resultFlag = false;
					}
					
					
					
					console.log(this.checkList);
				}else{
					this.showTips({
						content:data.message,
						closeTimeout:2000
					});
				}
				
				
			},
			goModelIntroduce:function(index){
				switch(index){
					case 1:
						HQ.openView(HQ.PAGE_SERVER + "index.html#!/modelIntroduce");
						break;
					case 2:
						HQ.openView(HQ.PAGE_SERVER + "index.html#!/engineIntroduce");
						break;
				}
			}
		},
		
		components:{
			swiper,
			swiperSlide,	
			tips:require("../../components/tips/tips.vue"),
			loading:require("../../components/loading/loading.vue")	
		},
		vuex: {
			actions: HQ_Actions,
			getters: HQ_Getters
			
		},
		computed:{
			
			
		},
		
		//不再当前页就销毁当前对象下的方法
		beforeDestroy: function() {
			delete HQ_CALLBACK.modelDetail;
		}
	}
</script>